/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-07-25 16:09:25
 * @LastEditTime : 2023-08-16 15:45:10
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\DiyForm.jsx
 * @Description  :
 */

import React from 'react'
import { Segmented, Timeline } from 'antd'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../Api'
import './Scss/DiyForm.scss'
import { TablePage } from './Workstation/TablePage'
import { commonImageUrl } from '../../../Configure/CommonParameter'
import { ICON } from '../../../Configure/Icon'
import { BuiltInData } from '../Common/common'
import { UserGroup } from '../Common/Conversion'

const ListData = [
    { uuid: 1, label: '草稿箱', value: 'draft', icon: 'caogao04' },
    { uuid: 2, label: '待审批', value: 'pending', icon: 'dengdaiwenjian' },
    { uuid: 3, label: '审核中', value: 'approval', icon: 'tijiaoshenhemianxing' },
    { uuid: 4, label: '待阅读', value: 'unRead', icon: 'shenhexiangmu' },
    { uuid: 5, label: '已完结', value: 'finish', icon: 'completefill' },
]

// 总览
const One = ({ flowUuid }) => {
    const [Data, setData] = useState([])
    const [items, setItems] = useState()
    const { runAsync: getNumber } = useRequest(Http, {
        manual: true,
        onSuccess: res => setData(res),
    })
    const { runAsync: getFlowDetail } = useRequest(Http, {
        manual: true,
        onSuccess: async res => {
            const UserGroupData = await UserGroup()
            const data = res.list.map(item => ({
                color: item.sortId === 1 ? '#3583EB' : 'green',
                children: (
                    <>
                        <p>
                            第 {item.sortId} 步 {BuiltInData.approvalType[item.approvalType]}
                        </p>
                        <p>{UserGroupData[item.userGroupUuid]}</p>
                    </>
                ),
            }))
            setItems(data)
        },
    })

    useEffect(() => {
        getNumber({ url: 'getFormGetStatusStatistics', data: { flowUuid } })
        getFlowDetail({ url: 'getFlowDetail', data: { flowUuid } })
    }, [getNumber, getFlowDetail, flowUuid])

    return (
        <div className="All">
            <div>
                <div>
                    {ListData.map(({ uuid, label, value, icon }) => (
                        <div key={uuid}>
                            {ICON[icon]}
                            <div>{label}</div>
                            <div>{Data[value]}</div>
                        </div>
                    ))}
                </div>
                <img src={commonImageUrl + 'examine.png'} alt="" />
            </div>
            <div>
                <Timeline items={items} />
            </div>
        </div>
    )
}
// 草稿箱
const Two = ({ flow, selectType }) => (
    <div className="Box">
        <TablePage flow={flow} selectType={selectType} />
    </div>
)

export const DiyForm = ({ uuid }) => {
    const [value, setValue] = useState(1)
    const [Flow, setFlow] = useState()
    const [options] = useState([
        { label: '总览', value: 1 },
        { label: '草稿箱', value: 2 },
        { label: '待审批', value: 3 },
        { label: '审核中', value: 4 },
        { label: '待阅读', value: 5 },
        { label: '已完结', value: 6 },
    ])
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setFlow(res) })
    useEffect(() => {
        runAsync({ url: 'getFlowUuid', path: [uuid] })
    }, [runAsync, uuid])

    return (
        <div className="DiyForm">
            <Segmented block options={options} value={value} onChange={e => setValue(e)} />
            {(() => {
                const list = { 2: 'Draft', 3: 'Pending', 4: 'Approval', 5: 'UnRead', 6: 'Finish' }
                if (value === 1) return <One flowUuid={uuid} />
                else return <Two flow={Flow} selectType={list[value]} />
            })()}
        </div>
    )
}
